.select-frend {
  display: flex;
  justify-content: space-between;
  min-height: 300px;
  .left {
    .list {
      margin-top: 10px;
    }
  }
  .right {
    width: 200px;
    .count {
      margin-top: 10px;
      margin-left: 10px;
    }
    .list {
      margin-top: 10px;
      // display: flex;
      .item {
        display: flex;
        padding: 10px;
        align-items: center;
        justify-content: space-between;
        .info {
          display: flex;
          .title {
            margin-left: 10px;
          }
        }
        .close {
          margin-left: 10px;
          cursor: pointer;
        }
      }
    }
  }
}
// .frend-list {
//   display: flex;
//   //   flex-direction: column;
//   margin-top: 10px;
//   width: 500px;
//   justify-content: space-between;
//   .frend-list-left {
//     .frend-item {
//       display: flex;
//       padding: 10px;
//       cursor: default;
//       justify-content: space-between;

//       .left {
//         display: flex;

//         .wrap {
//           display: flex;
//           flex-direction: column;
//           margin-left: 10px;

//           .title {
//           }

//           .message {
//             margin-top: 5px;
//             color: #938282;
//             font-size: 12px;
//           }
//         }
//       }

//       .right {
//         display: flex;
//         flex-direction: column;

//         .time {
//           // margin-top: 5px;
//           color: #938282;
//           font-size: 12px;
//         }

//         .status {
//           margin-top: 5px;
//           color: #938282;
//           font-size: 12px;
//         }
//       }

//       &--active {
//         background-color: #0099ff !important;
//       }

//       &:hover {
//         background-color: #e7e7e7;
//       }
//     }
//     &--search {
//       padding: 10px;
//     }
//   }
//   .frend-list-right {
//     display: flex;
//     justify-content: space-between;
//     flex-direction: column;
//     width: 200px;
//     .frend-item {
//       display: flex;
//       padding: 10px;
//       cursor: default;
//       justify-content: space-between;
//       .frend-item-left {
//         display: flex;
//       }
//       .frend-item-right {
//         display: flex;
//       }

//       &--active {
//         background-color: #0099ff !important;
//       }

//       &:hover {
//         background-color: #e7e7e7;
//       }
//     }
//   }
// }
